<template>
  <div class="voice_message" @click="open" title="点击播放语音">
    <span>{{ fileSize }}''</span>
    <i class="iconfont icon-yuyinbofang"  />
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  messageContent: {
    type: String,
  },
  fileSize: {
    type: Number,
  },
});

const ip = import.meta.env.VITE_APP_ACCESS_IP;

const audio = ref();
const open = () => {
  if (!audio.value) {
    audio.value = new Audio(ip + props.messageContent);
    audio.value.play();
  } else {
    if (audio.value.paused) {
      audio.value.play();
    } else {
      audio.value.pause();
    }
  }
};
</script>

<style lang="scss">
.voice_message {
  cursor: pointer;
  font-size: 12px;
  background: #eaeaea;
  padding: 14px;
  border-radius: 5px;
  max-width: 650px;
  white-space: break-spaces; // 显示换行
  i {
    margin-left: 10px;
  }
}
</style>
